<!-- 实验结论自定义结论项 -->
<template>
  <div class='jlxBox'>
    <el-row>
      <div class="plusCols">
        <div class="iconBox" style="font-size: 30px; color: #409EFF;"  v-if="state == '2'">
          <el-input v-model="expNameIpt" style="margin-right: 20px;width: 400px;" placeholder="请输入要新建的实验名称" clearable></el-input>
          <el-button type="primary" @click="addExp(expNameIpt)">添加实验</el-button>
        </div>
        <div>
          <el-button type="success" @click="lookResult">预览实验结果</el-button>
          <el-button type="success" @click="exportExcel">导出各实验项数据</el-button>
        </div>
      </div>
    </el-row>
    <!-- 主体 -->
    <el-tabs v-model="tabValue" type="card">
      <el-tab-pane
        v-for="item in details"
        :key="item.name"
        :name="item.name"
        :label="item.title"
      >
        <main class="borderBox">
          <el-row class="exp expTitle">
            <el-col>实验结论项</el-col>
            <el-col>{{expName}}</el-col>
          </el-row>
          <el-row class="exp zhibiao" v-for="(detailItem,index) in item.content" :key="index">
            <el-col>
              <div>{{`结论${index+1}`}}</div>
              <el-input class="titleInput" v-model="detailItem.prop" clearable></el-input>
              <!-- <el-input class="titleInput" v-model="expDetails[index].prop" clearable></el-input> -->
            </el-col>
            <el-col>
              <div>{{`结论${index+1}`}}</div>
                <el-input v-model="detailItem.valueArr" clearable placeholder="最多可输入100个字符"></el-input>
            </el-col>
          </el-row>
        </main>
      </el-tab-pane>
    </el-tabs>
    <el-row class="plusRow" type="flex" justify="center" v-if="state == '2'" style="margin-top: 10px;padding-top: 10px;">
      <el-col :span="8"></el-col>
      <el-col :span="12">
        <el-button type="primary" @click="addRowData()" >添加行数据</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="success" @click="saveConclusion">保存</el-button>
      </el-col>
      <!--  v-if="state !== '3' && state !== '4'" -->
    </el-row>
      <el-dialog
      title="详情"
      :visible.sync="dialogShow"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancelDialog"
    >
      <el-tabs v-model="tabDialogValue" type="card" @tab-click="tabChange">
        <el-tab-pane
          v-for="item in details"
          :key="item.name"
          :name="item.name"
          :label="item.title">
            <div class="container">
              <el-row v-for="(contentItem, index) in item.content" :key="index" style="margin-bottom: 15px;">
                <span>{{contentItem.prop}}:</span>
                <span>{{contentItem.valueArr}}</span>
              </el-row>
            </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" size="small" type="primary">确 定</el-button>
      </div>
  </el-dialog>
  </div>
</template>

<script>
import api from '../../api/exper.detail.js'

export default {
components: {},
props: ['id', 'fileName', 'state'],
data() {
  return {
    expName: 'XXX实验',
    expNameIpt: '',
    tabValue: '0',
    tabDialogValue: '0',
    details: [],
    // 实验结果dialog
    dialogShow: false,
  };
},
computed: {},
watch: {},
methods: {
  addExp(expNameIpt) {
    if (this.expNameIpt) {
      let detail = { // 新增实验
        name: this.details.length + "",
        title: expNameIpt,
        content: [{
          expId: this.$route.query.id,
          sort: 0,
          prop: '',
          valueArr: '',
        }],
      }
      this.details.push(detail)
      this.expNameIpt = ''
      this.tabValue = this.details.length - 1 + ''
    } else {
      this.$message.error('实验名称不能为空')
    }
  },
  cancelDialog() {
    this.dialogShow = false
  },
  lookResult() {
    this.dialogShow = true
  },
  // 减号操作
  /* deleteData (index,expDetails) {
    expDetails.splice(index, 1)
  }, */
  // 添加行数据
  addRowData () {  
    this.details[this.tabValue].content.push({valueArr: '', prop:'', expId: this.id, sort: this.details[this.tabValue].content.length})
    // this.expDetails.push({valueArr: '', prop:'', expId: this.id, sort: this.expDetails.length})
  },
  async exportExcel() {
    let data = await api.exportJlx(this.id, this.fileName)
  },
  async saveConclusion() {
    // console.log(this.details)
    let data = await api.postConclusion(this.details)
    if(data.code === 10200) {
      this.$message.success("保存成功")
      this.getPage()
      this.tabValue = '0'
    } else {
      this.$message.error("保存失败")
    }
  },
  async getPage() {
    let {data} = await api.getConclusion(this.id)
    this.details = data.length ?  data : this.details
    this.details.map(detailItem =>{
      detailItem.name = detailItem.name + ''
      return detailItem
    })
    // console.log(data)
  }
},
mounted() {
  this.getPage()
},
created() {},
}
</script>
<style scoped lang="less">
.exp{
  display:flex;
  align-items:center;
  font-weight: bold;
}
.expTitle{
  text-align: center;
  font-size: 22px;
}
.borderBox{
  // padding: 20px;
  border: 1px solid #999;
}
.plusCols{
  // float: right;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-col{
  &:nth-last-of-type(1){
    border: none
  }
}
.buttonRight{
  // float: right;
}
.buttonBox{
  min-height: 1px;
}
.zhibiao{
  .el-col{
    padding: 20px;
    height: 100px;
  }
}
.expTitle{
  .el-col{
    padding: 10px;
    // height: 80px;
  }
}
.expTitle,.zhibiao{
  .el-col{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  }
}
</style>